<template>
  <div class="content">
    <FilterTable
      ref="packageMaintenanceDLRCarDetail"
      :maxHeight="300"
      :columns="columns"
      :dataSource="carData"
      :isSelectColumn="packageType !== 'look'"
      :isColumnFilter="false"
      :isToperInfo="false"
      :columnsRef="$route.path + 'packageMaintenanceDLR-carDetail'"
      :onRowSelectChange="selectChange"
      :onCellChange="onCellChange"
      :onSyncTableData="onSyncTableData"
      :onColumnsChange="columns => (this.columns = columns)"
      :isMemoryPagination="true"
    >
    </FilterTable>

    <BaseDialog :visible.sync="UploadFileIsShow" title="导入" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <!-- <importFile title="导入" :actionUrl="actionUrl" @success="uploadSuccessFn" @close="UploadFileIsShow = false">

      </importFile> -->
    </BaseDialog>
  </div>
</template>

<script>
// import _ from 'lodash';
import { state, mutations } from '../store';
import { dictionary } from '@/utils/dictMixin';
import { exportExcelFile } from '@/utils/index';
import config from '@/assets/js/config';

export default {
  name: 'baseRules',
  components: {},
  mixins: [dictionary],
  props:['carData'],
  data() {
    return {
      UploadFileIsShow: false,
      repairTypeData: '', // 子页面需要的数据
      dataSource: this.carData,
      columns: this.createTableColumns(),
      selectedRows: [],
      vinArr:[],
      actionUrl: `${config.uploadUrl}/api/dmscloud.activity/activity/uploadCarTem`

    };
  },
  computed: {
    packageType() {
      return state.packageType;
    },
    packageCarDetail() {
      return state.packageCarDetail;
    }

  },
  watch: {
    packageCarDetail(newVal) {
      console.log(newVal, 'packageCarDetail-watch');
      if (this.packageType !== 'add' && !this.dataSource.length) {
        this.dataSource = newVal;
        this.baseTable.EXECUTE_INSERT(newVal);
      }
    }
  },
  mounted() {
    this.baseTable = this.$refs.packageMaintenanceDLRCarDetail.$refs.pageTable;
    this.initData();
  },
  beforeDestroy() {},
  methods: {
    async initData() {
    },
        unique(arr, val) {
      const res = new Map();
      return arr.filter((item) => !res.has(item[val]) && res.set(item[val], 1));
    },
    uploadSuccessFn(res) {
      console.log(res, 'uploadSuccessFn--res');

    },


    // 导入下载模板
    async downHandle() {
      this.$confirm('下载模板', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          console.log('downHandle');
          await downLoadExcelTemplate()
            .then(res => {
              exportExcelFile(res.data, '导入模板');
              this.$notify.success({ title: '提示信息', message: '下载成功' });
            })
            .catch(err => {
              console.log(err);
            });
        })
        .catch(() => {});
    },
    importHandle() {
      console.log('importHandle');
      this.UploadFileIsShow = true;
    },
    onCellChange(change, row) {
      console.log('onCellChange-----');

      this.dataSource = [...this.dataSource];
      mutations.setPackageCarDetail(this.dataSource);

    },
    // 同步表格数据
    onSyncTableData(val) {
      this.vinArr = val;
      console.log(val, 'onSyncTableData----Car--');
      mutations.setPackageCarDetail(this.vinArr);

    },
    deleteClick() {
      if (!this.selectedRows.length) {
        this.$notify.warning({ title: '提示信息', message: '请选择要删除的数据！' });
        return;
      }

      this.baseTable.EXECUTE_DELETE(this.selectedRows);
      this.dataSource = [...this.dataSource];
      mutations.setPackageCarDetail([...this.dataSource]);
    },
    selectChange(rows) {
      console.log('selectChange-----');
      this.selectedRows = rows;
    },

    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          render: props => {
            return <span>{props.row.$index + 1}</span>;
          }
        },
        {
          title: 'VIN',
          dataIndex: 'vin'
        },
        {
          title: '服务站代码',
          dataIndex: 'dutyOwnerCode'
        },
        {
          title: '服务站名称',
          dataIndex: 'dutyOwnerName',
          editable: false,
          // editType: 'select',
          // defaultEditable: false,
          // editItems: []
        }
      ];
    }
  }
};
</script>

<style lang="less" scoped>
.searchBtn {
  border-radius: 0px;
}
</style>
